import React        from 'react';
import Simditor     from 'simditor';
import 'simditor/styles/simditor.scss'
import './index.scss'

// 通用的富文本编辑器，依赖 jquery
class RichEditor extends React.Component{
  constructor(props){
    super(props)
  }

  componentDidMount(){
    this.loadEditor();
  }

  componentWillReceiveProps(nextProps){
      if(this.props.defaultDetail !== nextProps.defaultDetail){
        // setValue 是这个组件给我提供的方法
        this.simditor.setValue(nextProps.defaultDetail);
      }
  }

  loadEditor(){
    let element = this.refs['textarea'];
    // Initialize Simditor
    this.simditor = new Simditor({
      textarea : $(element),
      //optional options
      defalutValue : this.props.placeholder || '请输入内容',
      // 富文本编辑器 上传图片的功能
      upload : {
        // 富文本上传的接口地址
        url           : '/manage/product/richtext_img_upload.do' ,
        defalutImage  : '',
        // 对应后端接口的字段名称
        fileKey       : 'upload_file'
      }
    });
    this.bindEditorEvent();
  }

  // 这是初始化富文本编辑器的事件
  bindEditorEvent(){
    // 这里富文本编辑器自身会暴露出 一个 valuechanged事件，在这里监听这个事件，触发后回调
    this.simditor.on('valuechanged', e => {
      // console.log(e)
      this.props.onValueChange(this.simditor.getValue());
    })
    // 这样就完成了将 这个 jquery 的事件转化为了 RichEditor 的事件
  }

  render(){
    return (
      <div className="rich-editor simditor-body">
        <textarea ref="textarea"></textarea>
      </div>
    );
  }
}

export default RichEditor;